<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Cesium Sensors Example</title>

  <link rel="stylesheet" href="//cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" />
  <script src="//cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <script src="../Build/Unminified/CesiumSensors.js"></script>

  <style>
      #cesiumContainer {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          margin: 0;
          overflow: hidden;
          padding: 0;
          font-family: sans-serif;
      }

      html {
        height: 100%;
      }

      body {
          padding: 0;
          margin: 0;
          overflow: hidden;
          height: 100%;
      }

      #toolbar {
          margin: 5px;
          padding: 2px 5px;
          position: absolute;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="toolbar"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        sceneModePicker : false
    });

    var longitude = Cesium.Math.toRadians(-90.0);
    var latitude = Cesium.Math.toRadians(30.0);
    var altitude = 3000000.0;
    var clock = 0.0;
    var cone = Cesium.Math.toRadians(15.0);
    var twist = 0.0;

    function getModelMatrix() {
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var location = ellipsoid.cartographicToCartesian(new Cesium.Cartographic(longitude, latitude, altitude));
        var modelMatrix = Cesium.Transforms.northEastDownToFixedFrame(location);
        var orientation = Cesium.Matrix3.multiply(
                            Cesium.Matrix3.multiply(Cesium.Matrix3.fromRotationZ(clock), Cesium.Matrix3.fromRotationY(cone), new Cesium.Matrix3()),
                            Cesium.Matrix3.fromRotationX(twist), new Cesium.Matrix3()
                          );
        return Cesium.Matrix4.multiply(modelMatrix, Cesium.Matrix4.fromRotationTranslation(orientation, Cesium.Cartesian3.ZERO), new Cesium.Matrix4());
    }

    function addRectangularSensor() {
        viewer.scene.primitives.removeAll();
        var rectangularPyramidSensor = new CesiumSensors.RectangularPyramidSensorVolume();

        rectangularPyramidSensor.modelMatrix = getModelMatrix();
        rectangularPyramidSensor.radius = 20000000.0;
        rectangularPyramidSensor.xHalfAngle = Cesium.Math.toRadians(40.0);
        rectangularPyramidSensor.yHalfAngle = Cesium.Math.toRadians(20.0);

        rectangularPyramidSensor.lateralSurfaceMaterial = Cesium.Material.fromType('Color');
        rectangularPyramidSensor.lateralSurfaceMaterial.uniforms.color = new Cesium.Color(0.0, 1.0, 1.0, 0.5);
        viewer.scene.primitives.add(rectangularPyramidSensor);
    }

    function addCustomSensor() {
        viewer.scene.primitives.removeAll();
        var customSensor = new CesiumSensors.CustomSensorVolume();

        var directions = [];
        for (var i = 0; i < 8; ++i) {
            var clock = Cesium.Math.toRadians(45.0 * i);
            var cone = Cesium.Math.toRadians(25.0);
            directions.push(new Cesium.Spherical(clock, cone));
        }

        customSensor.modelMatrix = getModelMatrix();
        customSensor.radius = 20000000.0;
        customSensor.directions = directions;
        viewer.scene.primitives.add(customSensor);
    }

    function addToolbarButton(text, onclick) {
        var button = document.createElement('button');
        button.type = 'button';
        button.className = 'cesium-button';
        button.onclick = onclick;
        button.textContent = text;
        document.getElementById('toolbar').appendChild(button);
    }

    addToolbarButton('Rectangular', addRectangularSensor);
    addToolbarButton('Custom', addCustomSensor);

    addRectangularSensor();
  </script>
</body>
</html>